import type { SplitPaneProps } from 'react-split-pane'
import type { PropsWithChildren } from 'react'
import { Editor } from './Editor'
import { Viewer } from './Viewer'
import type { Settings } from './store'
import { StoreContextProvider } from './store'
import SplitPane from './SplitPane'
import { SandboxEleProvider } from './store/sandboxEleStore'

interface ReplProps extends Settings {
  split?: SplitPaneProps
  className?: string
  style?: Record<string, any>
}
function Repl({ split, className, style, children, ...settings }: PropsWithChildren<ReplProps>) {
  let mergedChildren = children ?? [
    <Editor key="editor" />,
    <Viewer key="viewer" />,
  ]

  if (split)
    mergedChildren = <SplitPane {...split}>{children}</SplitPane>

  return (
    <StoreContextProvider settings={settings}>
      <SandboxEleProvider>
        <section className={`openinula-repl relative ${className}`} style={style}>
          {mergedChildren}
        </section>
      </SandboxEleProvider>
    </StoreContextProvider>
  )
}

export { Repl }
